<template>
  <div>
    <Header :head="head" />
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <span class="mui-navigate-right">头像</span>
        <img :src="img" alt />
      </li>
    </ul>
    <ul class="mui-table-view">
      <router-link to="/major/my/setusername" tag="li" class="mui-table-view-cell">
        <span class="mui-navigate-right">用户名:</span>
        <p>{{us}}</p>
      </router-link>
    </ul>
    <ul class="mui-table-view">
      <li @click.prevent="empty" class="mui-table-view-cell">
        <span class="mui-navigate-right">收货地址</span>
      </li>
    </ul>
    <p>账号绑定</p>
    <ul class="mui-table-view">
      <li @click.prevent="empty" class="mui-table-view-cell">
        <span class="mui-navigate-right">绑定手机</span>
      </li>
    </ul>
    <p>安全设置</p>
    <ul class="mui-table-view">
      <router-link to="/major/my/forget" tag="li" class="mui-table-view-cell">
        <span class="mui-navigate-right">登录密码</span>
        <p>修改</p>
      </router-link>
    </ul>
    <input type="button" value="退出登录" @click="leave" />
  </div>
</template>

<script>
import Header from '../../common/Header'
import { Toast } from 'mint-ui'
import { MessageBox } from 'mint-ui'
export default {
  components: {
    Header
  },
  data() {
    return {
      head: '账户信息',
      img: null,
      us: null
    }
  },
  methods: {
    leave() {
      this.$http
        .get('v2/signout')
        .then(data => {
          Toast({
            message: data.body.message,
            duration: 1000
          })
          localStorage.removeItem('user')
          window.location.hash = '/major/home'
        })
        .catch(() => {
          Toast({
            message: '数据异常,请检查网络',
            duration: 1000
          })
        })
    },
    empty() {
      MessageBox('提示', '请在手机APP进行该操作')
    }
  },
  created() {
    //从内存中获取用户信息
    let user = JSON.parse(localStorage.getItem('user'))
    if (user) {
      this.us = user.username
      this.img = 'https://elm.cangdu.org/img/' + user.avatar
    }
  }
}
</script>
<style  scoped>
.mui-navigate-right {
  font-size: 4vw;
  width: 100vw;
}
.mui-table-view-cell > a:not(.mui-btn) {
  padding: 3vw 0 3vw 0;
}
.mui-table-view-cell {
  padding: 3vw;
  position: relative;
}
ul {
  font-size: 3vw;
  background-color: #f5f5f5;
}
p {
  margin: 2vw 0;
  padding-left: 3vw;
  font-size: 3vw;
}
img {
  height: 15vw;
  width: 15vw;
  border-radius: 50%;
  margin-left: 65%;
}
li > p {
  float: right;
  margin: 0 7vw;
  padding: 0;
  font-size: 4vw;
}
input[type='button'] {
  margin: 5vw 5% 0 5%;
  width: 90%;
  background-color: #d8584a;
}
</style>